{extend name="base" /} {block name="css"}
<link rel="stylesheet" href="__CSS__/material.css">
<link rel="stylesheet" type="text/css" href="__CSS__/iconfont.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/images/iconfont/iconfont.css"> {/block} {block name="body"}

<div class="layui-body" id="material">
    <div class="top-nav">
        <div :class="item.clickStatus" v-for='(item,index) in materialType' @click="choiceType(index)">
            {{item.name}}
        </div>
    </div>
    <div class="mainModule">
        <div class="add-and-search">
            <div class="add">新增图文素材</div>
            <div class="search">
                <span class="all">
                    <input type="radio" title="全选">
                </span>
                <span class="move-class">移动分组</span>
                <span class="delete">删除</span>
                <span class="search-box">
                    <input type="text" placeholder="标题">
                    <button>搜索</button>
                </span>
            </div>
        </div>
        <div class="material-contain">
            <div class="grouping">
                <div class="grouping-title">图文分组
                    <span class="grouping-add">添加</span>
                </div>
                <div class="grouping-item">
                    <span class="grouping-item-name">全部</span>
                    <span class="grouping-item-num">34</span>
                </div>
                <div class="grouping-item">
                    <span class="grouping-item-name">全部</span>
                    <span class="grouping-item-num">34</span>
                </div>
            </div>
            <div class="material-contain-list">
                <div class="material-contain-wrapper" id="masonry">

                    <div class="material-item" v-for="item in materialList">
                        <div class="material-time">2018/05/12</div>
                        <div class="big-img" v-for="(innerItem, innerIndex) in item.content.news_item" v-if="innerIndex == 0">
                            <img class="big-img-item" :src="innerItem.thumb_url" alt="">
                            <div class="big-img-title">{{innerItem.title}}</div>
                        </div>

                        <div class="chirden-item-list" v-else>
                            <div class="chirden-item-img">
                                <img :src="innerItem.thumb_url" alt="">
                            </div>
                            <div class="chirden-item-title">{{innerItem.title}}</div>
                        </div>

                        <div class="operations">
                            <input type="checkbox" class="operations-check" :value="item.id">
                            <div class="iconfont operations-edit" title="编辑">&#xe600;</div>
                            <div class="iconfont operations-echange" title="分组" @click="changeGroup(item.media_id)">&#xe7b2;</div>
                            <div class="iconfont operations-delete" @click="deleteImagesTextItem(item.media_id)" title="删除">&#xe61d;</div>
                            <div class="cahnge-group" v-if="item.media_id === showGroupItem">
                                <form action="">
                                    <label class="mdui-radio" style="display: block" v-for="groupItem in groupList">
                                        <input type="radio" name="group1" />
                                        <i class="mdui-radio-icon"></i>
                                        {{groupItem.name}}
                                    </label>
                                </form>
                                <button class="mdui-btn mdui-btn-raised mdui-color-blue mdui-text-color-white mdui-btn-dense">确定</button>
                                <button class="mdui-btn mdui-btn-raised mdui-btn-dense" @click="cancleGroup">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

{/block} {block name="js"}
<script src="__JS__/material/materialMethod.js"></script>
<script src="__JS__/material/materialMain.js"></script>
<script src="__JS__/material/axios.js"></script>
<script src="__JS__/material/masonry.js"></script> {/block}